<template>
  <BaseMainSlot :show-btn-box="true">
    <template v-slot:btn-box>
      <ActionBar
        :page-no="24"
        :add-active="true"
        :del-active="delActive"
        :has-cancel="false"
        @add="showDialog"
        @del="del"
      />
    </template>
    <template v-slot:search-box>
      <SearchBox @search="search">
        <div class="seach-box">
          <div class="select-box-content">
            <div class="select-box-content-name">供应商名称：</div>
            <el-input
              v-model="querylist.supplierName"
              placeholder="请输入供应商名称"
              clearable
            />
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">统一社会信用代码：</div>
            <el-input
              v-model="querylist.creditCode"
              placeholder="请输入统一社会信用代码"
              clearable
            />
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">供应商地址：</div>
            <el-input
              v-model="querylist.address"
              placeholder="请输入供应商地址"
              clearable
            />
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">供应商负责人：</div>
            <el-input
              v-model="querylist.legalBody"
              placeholder="请输入供应商负责人"
              clearable
            />
          </div>
        </div>
      </SearchBox>
    </template>
    <template v-slot:table-box>
      <tdtable
        :page="page"
        :title="title"
        :prop-list="propList"
        :show-select-column="showSelectColumn"
        :show-index-column="showIndexColumn"
        :table-data="tableData"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        @handleSelectionChange="handleSelectionChange"
      >
        <template v-slot:pictureNo="{row}">
          <div
            v-if="row.supplierNo"
            class="pointer"
            @click="showImgDialog(row.pictureNo)"
          >
            <i class="el-icon-view"></i>营业执照
          </div>
        </template>
        <template v-slot:handler="{row}">
          <div v-if="row.supplierNo" class="pointer" @click="edit(row)">
            <i class="el-icon-edit"></i>修改
          </div>
        </template>
        <template v-slot:supplier="{row}">
          <div v-if="row.supplierNo" class="operate">
            <div class="pointer" @click="WatchMaterial(row)">
              <i class="el-icon-view"></i>查看原料
            </div>
          </div>
        </template>
      </tdtable>
    </template>
    <template v-slot:dialog>
      <AddDialog
        :show="show"
        :material-list="materialList"
        :form-data-copy="formData"
        :title-text="titleText"
        @closeDialog="closeDialog"
        @addSupplier="addSupplier"
      />
      <watchMDialog
        :show="watchM"
        :material-list="materialList"
        :form-data-copy="formData"
        title-text="查看原料"
        @closeDialog="watchM = false"
      />
      <ImgDialog
        :picture-url="pictureUrl"
        :show="isShowImgDialog"
        @closeDialog="isShowImgDialog = false"
      />
    </template>
  </BaseMainSlot>
</template>

<script>
import ImgDialog from "./components/img-dialog.vue";
import ActionBar from "@/components/ActionBar/index1.vue";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import tdtable from "@/components/table/index.vue";
import AddDialog from "./components/add-supplier-dialog.vue";
import watchMDialog from "./components/watch -material.vue";
import SearchBox from "@/components/SearchBox/index.vue";
import supplerApi from "@/api/processing-management/basic-info-manage/supplier-manage/index";
import processingPrtApi from "@/api/processing-management/basic-info-manage/processing-material-manage/index";
import QualityManage from "@/api/processing-management/quarity-manage";
import { mymixin } from "@/utils/mixin";
export default {
  name: "EntrustProcessTaskHandle",
  components: {
    BaseMainSlot,
    tdtable,
    AddDialog,
    SearchBox,
    ActionBar,
    ImgDialog,
    watchMDialog
  },
  mixins: [mymixin],
  data() {
    return {
      watchM: false,
      materialList: [],
      formData: {},
      tableData: [],
      pictureUrl: "",
      isShowImgDialog: false,
      querylist: {
        supplierName: undefined,
        creditCode: undefined,
        address: undefined,
        legalBody: undefined
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      title: "供应商管理列表",
      propList: [
        { prop: "supplierName", label: "供应商名称", minWidth: "100" },
        { prop: "creditCode", label: "统一社会信用代码", minWidth: "120" },
        { prop: "address", label: "供应商地址", minWidth: "80" },
        { prop: "legalBody", label: "供应商负责人", minWidth: "100" },
        { prop: "tel", label: "供应商联系电话", minWidth: "100" },
        { prop: "bankAccount", label: "银行账号", minWidth: "100" },
        { prop: "bank", label: "开户行", minWidth: "100" },
        {
          prop: "pictureNo",
          label: "营业执照",
          minWidth: "100",
          slotName: "pictureNo"
        },
        {
          prop: "supplier",
          label: "供应商供应原料",
          minWidth: "140",
          slotName: "supplier"
        },
        { label: "操作", minWidth: "120", slotName: "handler" }
      ],
      showIndexColumn: true,
      showSelectColumn: true,
      titleText: "供应商信息",
      show: false,
      handleSelectList: []
      // loading:false
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.queryPageList();
    this.getMaterialList();
  },
  methods: {
    // 获取原料
    getMaterialList() {
      processingPrtApi.queryList({}).then(res => {
        if (res.code === 1) {
          this.materialList = res.data;
        }
      });
    },
    showImgDialog(pictureNo) {
      this.isShowImgDialog = true;
      if (pictureNo) {
        QualityManage.getPictureUrl(pictureNo).then(res => {
          this.pictureUrl = "data:image/png;base64," + res.data.data;
        });
      } else {
        this.pictureUrl = "";
      }
    },
    // 修改
    edit(row) {
      this.show = true;
      this.handle = "edit";
      this.formData = { ...row };
    },
    WatchMaterial(row) {
      this.watchM = true;
      this.formData = { ...row };
    },
    search() {
      this.queryPageList();
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.queryPageList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.queryPageList();
    },
    // 选中table行点击事件
    handleSelectionChange(val) {
      console.log(val);
      this.handleSelectList = [];
      val.forEach(e => {
        this.handleSelectList.push(e.supplierNo);
      });
    },
    // 查询供应商列表
    queryPageList() {
      // 获取数据
      let param = {
        page: this.page.currentPage,
        size: this.page.pageSize,
        entity: this.querylist
      };
      supplerApi.queryPageList(param).then(res => {
        if (res.code === 1) {
          let data = res.data;
          this.page.total = data.totalElements;
          this.tableData = data.content;
        }
      });
    },
    // 添加供应商
    addSupplier(formData) {
      // let params = formData;
      // supplerApi.add(params).then(res => {
      //   console.log(res);
      //   if (res.code === 1) {
      //     this.$message.success(res.msg);
      //     this.queryPageList();
      //   }
      // });
      let params = formData;
      if (this.handle === "add") {
        supplerApi.add(params).then(res => {
          console.log(res);
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.queryPageList();
          }
        });
      }
      if (this.handle === "edit") {
        supplerApi.edit(params).then(res => {
          console.log(res);
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.queryPageList();
          }
        });
      }
    },
    // 删除供应商
    del() {
      let params = { noList: this.handleSelectList };
      supplerApi.del(params).then(res => {
        console.log(res);
        if (res.code === 1) {
          this.$message.success(res.msg);
          this.queryPageList();
        }
      });
    },
    // 显示弹出框
    showDialog() {
      this.show = true;
      this.handle = "add";
      this.formData = {};
    },
    // 关闭弹出框
    closeDialog() {
      this.show = false;
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
.botton {
  background-color: #0091b7;
}
.supplier-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  p {
    margin-right: 12px;
  }
}
.operate {
  display: flex;
  justify-content: space-evenly;
}
</style>
